<template>
   <el-table :data="props.tableData" class="table" border show-overflow-tooltip style="margin-top: 30px;">
      <el-table-column type="index" width="50"/>
      <el-table-column prop="goods_name" label="商品名称"/>
      <el-table-column prop="goods_price" label="商品价格"/>
      <el-table-column prop="goods_weight" label="商品重量" />
      <el-table-column prop="add_time" label="创建时间">
        <template #default="scope">
            {{createTiem(scope.row.add_time)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scopeB">
          <el-button size="small" color="#409eff" :icon="Edit" style="color: #fff" @click="showEditProduct(scopeB.row.goods_id)">编辑</el-button>
          <el-button size="small" color="#F56C6C" :icon="Delete" style="color: #fff" @click="deleteUser(scopeB.row.goods_id)">删除</el-button>
        </template>
      </el-table-column>
   </el-table>
</template>

<script lang="ts" setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { DeleteProductsFnc } from '@/api/goods'

const props = defineProps({
  tableData: {type: Array, required: true},
  total: {type: Number, required: true},
  pageNow: {type: Number, required: true},
  pageSize: {type: Number, required: true}
})

const emit = defineEmits(['showEditDialog', 'init', 'saveID'])

const showEditProduct = (id: number) => {
  emit('showEditDialog', true)
  emit('saveID', id)
}

// 删除商品
const deleteUser = async (id: number) => {
  const res = await DeleteProductsFnc(id)
  ElMessageBox.confirm('此操作将永久删除商品, 是否继续?', '提示',{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(async () => {
    const res = await DeleteProductsFnc(id)
    if(res.data.meta.status === 200) {
      ElMessage({type: 'success', message: '删除成功', duration: 1000, onClose: () => {
        emit('init', props.pageNow, props.pageSize)
      }}) 
    }
  }).catch(() => {
    ElMessage({ type: 'info', message: '取消删除'})
  })
  console.log(res)
}

// 创建时间
const createTiem = (time: number) => {
 const dt = new Date(time)
 const year = dt.getFullYear()
 const month = (dt.getMonth() + 1 + '').padStart(2, '0')
 const d = (dt.getDate() + '').padStart(2, '0')
 const s = (dt.getHours() + '').padStart(2, '0')
 const f = (dt.getMinutes() + '').padStart(2, '0')
 const m = (dt.getSeconds() + '').padStart(2, '0')
 return `${year}-${month}-${d} ${s}:${f}:${m}`
}
</script>